<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>

		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>克隆类型</text>
		</view>


		<view class="flex-start-center margin-bottom_30rpx" style="color:#333333" @click="localFn()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 克隆类型</text>
		</view>


		<view class="display-a margin-bottom_30rpx margin-top_30rpx">
			<view class="label" @click="getLabel(0)" :style="selLabel == 0 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				全部</view>
			<view class="label" @click="getLabel(1)" :style="selLabel == 1 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				生成中</view>
			<view class="label" @click="getLabel(2)" :style="selLabel == 2 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				生成成功</view>
			<view class="label" @click="getLabel(3)" :style="selLabel == 3 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				生成失败</view>

		</view>

		<mescroll-body v-if="uid" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="flex-wrap-flex-start-center">
				<!-- 增加数字人 -->
				<view class="add-digital-cls flex-column" style="margin-top: 33rpx;" @click="addDigital()">
					<image mode="widthFix" :src="group3389Nine"></image>
					<view>增加数字人</view>
				</view>
				<!-- 数字人形象列表 -->
				<view class="container " style=" margin-top: 30rpx;"
					:style="{marginRight:index==1?' 0rpx':   ((index-4) % 3)==0?'0':'12rpx'}"
					v-for="(item,index) in list" :key="index">

					<image class="digitImg" :src="item.video_cover" mode="aspectFill"></image>



					<view class=" font-overflow  border-bottom-ECECEC " style="padding: 10rpx 10rpx 10rpx 10rpx;">
						{{item.name}}
					</view>

					<view class="flex-around margin_10rpx_0"
						v-if="item.is_status==2||item.check_status==3||item.is_status==3">
						<image class="icon" :src="group3376Nine" mode="" @click="delavatar(item)"></image>
						<image class="icon" :src="group3377Nine" mode="" @click="paste(item.video_url)"></image>
						<image class="icon" :src="group3378Nine" mode="" @click="longpress(item.video_url)"></image>
					</view>
					<view class="flex-around margin_10rpx_0" v-else>
						<image class="icon" :src="group3379Nine" mode=""></image>
						<image class="icon" :src="group3380Nine" mode=""></image>
						<image class="icon" :src="group3381Nine" mode=""></image>
					</view>

					<!-- 审核状态 (1:待审核,2:审核通过,3:审核驳回)
					1:生成中,2:生成成功,3:生成失败 -->
					<view class=" flex"
					     v-if="item.check_status!=2"
						:class="item.check_status==1?'statusColorG':item.check_status==2?'statusColorB':'statusColorR'">
						{{item.check_status==1?'待审核':item.check_status==2?'审核通过':'已驳回'}}
					</view>
					
					<view class=" flex"
					     v-else
						:class="item.is_status==1?'statusColorG':item.is_status==2?'statusColorB':'statusColorR'">
						{{item.is_status==1?'生成中':item.is_status==2?'生成成功':'生成失败'}}
					</view>

					<view class="mask flex" v-if="item.check_status==3||item.check_status==1">
						<text v-if="item.check_status==1" class="font-overflow " style="width: 200rpx;">联系管理员审核</text>
						<text v-if="item.check_status==3" class="font-overflow "
							style="width: 190rpx;color: red;font-size: 20rpx">已驳回:{{item.refuse}}</text>
					</view>

				</view>


			</view>
		</mescroll-body>
		<mescroll-empty v-else :option="optEmpty"></mescroll-empty>
		<sunui-popup ref="pop">
			<template v-slot:content>
				<view class="v-pop-cls">
					<view class="margin-bottom_50rpx font-size_36rpx display-a-jc">数字人形象名称</view>
					<view class="flex-start-center">
						<view class="margin-right_30rpx">
							名称
							<span class="must">*</span>
						</view>
						<input style="height: 76rpx;padding: 0 22rpx;width: 73%;" type="text" v-model="name"
							class="input-frame" placeholder="请输入数字人形象名称" placeholder-class="placeholder" />
					</view>


					<view class="sunui-flex-space-around margin-top_60rpx">
						<view class="confirm-btn" @click="confirm()">确认</view>
						<view class="confirm-btn" @click="cancel()">取消</view>
					</view>
				</view>
			</template>
		</sunui-popup>

		<!-- 训练前提示 弹框 -->
		<sunui-popup ref="pop2">
			<template v-slot:content>
				<view class="v-pop-cls">
					<view class="video-title-cls flex">数字人视频要求</view>
					<view class="detail-cls">请在光线清楚的环境下，使用主摄像头，保持镜头
						平视按下方要求录制上半身和全身视频。</view>
					<image mode="widthFix" :src="digitalImage"></image>

					<!-- 视频克隆要求 -->
					<view class="flex-align-center hint-cls">
						<view></view>
						<text>视频支持MP4/MOV格式 像素480P以上。</text>
					</view>
					<view class="flex-align-center hint-cls">
						<view></view>
						<text>上传的视频要求15秒以上，容量500M以内。</text>
					</view>
					<view class="flex-align-center hint-cls">
						<view></view>
						<text>视频全程只能有一张脸，且嘴巴不得遮挡。</text>
					</view>
					<view class="flex-align-center hint-cls">
						<view></view>
						<text>人脸大小要是视频宽度1/5以上，1/2以下。</text>
					</view>
					<view class="flex-align-center hint-cls">
						<view></view>
						<text>请使用原始录制视频不要有特效和字幕。</text>
					</view>
					<view class="flex-align-center hint-cls">
						<view></view>
						<text>视频可以说1234，但不能有背景音乐。</text>
					</view>
					<view class="flex-align-center hint-cls">
						<view></view>
						<text>清晰特别是嘴型清楚的视频成片效果更佳。</text>
					</view>
					<view class="c-but flex" @click="uploadClick()">立即上传视频 {{'('+"算力："+tallySet.avatar_tally+')'}}
					</view>
				</view>
			</template>
		</sunui-popup>







	</view>
</template>

<script>
	const base64 = require('@/utils/ali-oos/base64.js'); //Base64,hmac,sha1,crypto相关算法
	require('@/utils/ali-oos/hmac.js');
	require('@/utils/ali-oos/sha1.js');
	const Crypto = require('@/utils/ali-oos/crypto.js');
	export default {
		data() {
			return {
				navTop: '',
				materialBg: this.$imgs.violet,
				group3389Nine: this.$imgs.group3389Nine,
				digitalImage: this.$imgs.digitalImage,
				group3376Nine: this.$imgs.group3376Nine,
				group3377Nine: this.$imgs.group3377Nine,

				group3378Nine: this.$imgs.group3378Nine,


				group3379Nine: this.$imgs.group3379Nine,
				group3380Nine: this.$imgs.group3380Nine,
				group3381Nine: this.$imgs.group3381Nine,

				selLabel: 0,




				tempFiles: [], //上传获取到的文件数组
				/* 上传视频start */
				formData: {
					key: '',
					policy: '',
					OSSAccessKeyId: '',
					signature: '',
					success_action_status: '200'
				},

				policyText: {
					expiration: '2050-01-01T12:00:00.000Z', //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
					conditions: [
						['content-length-range', 0, Number(uni.getStorageSync('upload_allow_size'))] // 设置上传文件的大小限制(104857600为：100MB，31457280为30MB)
					]
				},

				id: '',

				upPicUrl2: '',
				ossUrl: '', //上传阿里云返回视频路径
				videoShowUrl: '',
				name: '',
				webBgWidth: '',
				webBgHeight: '',
				list: [],
				isWhether: true,
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: "",
				tallySet: uni.getStorageSync('tallySet'),
				user: uni.getStorageSync('user'),
				uid: uni.getStorageSync('uid'),
				duration: 0,
				optEmpty: {
					tip: '暂无数据 ~ '
				},
				memberSetObj: {},
				tempFilesRes:''


			}
		},
		onLoad() {
			const app = getApp();
			this.navTop = app.globalData.navTop;
			this.memberSetFn()

			if (this.uid) {
				this.set();
				this.createdgetSystemInfo()
				this.tallySetFn()
				this.userInfos()
			}

		},
		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},
		onShow() {


			if (this.uid) {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
			}

		},

		computed: {


		},
		methods: {
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;

					uni.setStorageSync('user', result.data);


				}
			},
			async tallySetFn() {
				const result = await this.$http.get({
					url: this.$api.tallySet,

				});
				if (result.errno == 0) {
					console.log(result.data)

					uni.setStorageSync('tallySet', result.data);



				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},
			getLabel(index) {
				this.selLabel = index;

				if (this.uid) {
					this.$nextTick(() => {
						this.mescroll.resetUpScroll();
					});
				}



			},
			//保存到相册
			async longpress(url) {
				if (!this.isWhether) {
					return;
				}
				this.isWhether = false;
				
				
				uni.showLoading({
					title: '加载中...',
					mask: true
				});



				uni.downloadFile({
					url: url,
					success: res => {
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: r => {
									this.isWhether = true;
									uni.hideLoading();
									this.$sun.toast('保存视频成功');
									uni.hideLoading()
								},
								fail: e => {
									// console.log(res);
									if (e.errMsg ==
										'saveVideoToPhotosAlbum:fail auth deny'
									) {
										uni.hideLoading();
										uni.showModal({
											title: '您需要授权相册权限',
											success(res) {
												if (res
													.confirm) {
													uni.openSetting({
														success(
															res
														) {},
														fail(
															res
														) {
															// console.log(res);
														}
													});
												}
											}
										});
									} else if (e.errMsg ==
										'saveVideoToPhotosAlbum:fail file not exists'
									) {
										this.isWhether = true;
										uni.hideLoading();
										this.$sun.toast(
											'保存失败,视频文件不存在!', 'none'
										);
									} else {
										this.isWhether = true;
										uni.hideLoading();
										console.log('err==>', e);
										this.$sun.toast('保存失败',
											'error');
									}
								}
							});
						} else {
							this.isWhether = true;
							uni.hideLoading();
							this.$sun.toast('下载失败', 'error');
						}
					},
					fail: err => {
						uni.hideLoading();
						this.$sun.toast(err, 'error');
						this.isWhether = true;
					}
				});


			},
			// 复制订单号
			paste(url) {
				uni.setClipboardData({
					data: url,
					success: () => {
						// 复制成功的回调
						uni.showToast({
							title: '复制视频链接成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.log(err)
						// 复制失败的回调
						uni.showToast({
							title: '复制是视频链接失败',
							icon: 'error'
						});
					}
				});


			},
			// 删除音频
			delavatar(obj) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该形象吗?',
					success: async res => {
						if (res.confirm) {

							const result = await this.$http.post({
								url: this.$api.avatarDel,
								data: {
									uid: uni.getStorageSync('uid'),
									avatar_id: obj.id
								}
							});
							if (result.errno == 0) {
								this.$sun.toast('删除成功');
								setTimeout(() => {
									this.$nextTick(() => {
										this.mescroll.resetUpScroll();
									});
								}, 2000);
							} else {
								this.$sun.toast(result.message, 'none');
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},

			async upCallback(scroll) {



				const result = await this.$http.post({
					url: this.$api.avatarPage,
					data: {
						uid: uni.getStorageSync("uid"),
						is_status: this.selLabel == 0 ? '' : this.selLabel,
						page: scroll.num,
						psize: 10
					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.data.total);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log(this.list)
				}

			},



			/*  阿里云设置  */
			async set() {
				const result = await this.$http.get({
					url: this.$api.uploadSet,

				});
				if (result.errno == 0) {
					// accessKey 阿里云key秘钥 accessId 阿里云id
					console.log('result', result);
					this.upPicUrl2 = 'https://' + result.data.alioss_domain;
					this.formData.OSSAccessKeyId = result.data.alioss_access_key_id;
					this.formData.policy = base64.encode(JSON.stringify(this.policyText));
					let message = this.formData.policy;
					let bytes = Crypto.HMAC(Crypto.SHA1, message, result.data.alioss_access_key_secret, {
						asBytes: true
					});
					this.formData.signature = Crypto.util.bytesToBase64(bytes);

					console.log('------------formData', this.formData);
				}
			},
			// “上传文件” 视频点击事件
			uploadClick() {
				let that = this;
				uni.chooseVideo({
					sourceType: ['album'],
					compressed: false,
					// 如果type属性和extension同时存在，例如{type:'image',extension:['.png','.jpg']}，则会选择image/png,image/jpg文件
					// 如果只配置extension属性，例如{extension:['.doc','.xlsx','.docx']}，则会选择.doc,.xlsx,.docx文件，详情见accept属性
					// 在微信环境中，如果type="all"，则extension属性失效
					count: 1, //选取的文件个数限制
					// type: 'video', //all	从所有文件选择    video	只能选择视频文件   image	只能选择图片文件
					extension: ['.mp4', '.3gp', '.mov'], //可定义允许哪些后缀的文件可被选择
					success: res => {
						// let allLength = that.tempFiles.length + res.tempFilePath.length;
						console.log('点击上传事件res.tempFiles', res.tempFilePath.length, 'that.tempFiles', that
							.tempFiles.length);
						// if (allLength > 1) {
						// 	this.$sun.toast('当前限制选择 1 个文件');
						// 	return;
						// }
						that.tempFiles = [res.tempFilePath]; //要上传的文件
						this.tempFilesRes = [res];
						console.log('tempFiles======', that.tempFiles, 'res', res);
						this.duration = res.duration
						this.startUploading();
					}
				});
			},

			// 开始上传
			async startUploading() {
				// let that = this;
				// this.numCount = 0;
				if (this.tempFiles.length <= 0) {
					this.$sun.toast('请先上传文件', 'none');
					return;
				}

				let isLt = true;
				let numSize =  Number(uni.getStorageSync('upload_allow_size'))/ 1024 / 1024;
				for (let i = 0; i < this.tempFiles.length; i++) {
					// 判断是否小于2mb
					if (this.tempFilesRes[i].size / 1024 / 1024 > numSize) {
						isLt = false;
					}
				}
				if (!isLt) {
					for (let i = 0; i < this.tempFiles.length; i++) {
						// 判断是否小于2mb
						if (this.tempFilesRes[i].size / 1024 / 1024 > numSize) {
							console.log('进入删除', i);
							this.tempFiles.splice(i, 1);
						}
					}
					this.$sun.toast('请上传小于' +  numSize.toFixed(2) + 'MB文件', 'none');
					return;
				}

				uni.showLoading({
					title: '上传中...'
				});
				for (let i = 0; i < this.tempFiles.length; i++) {
					let markIndex = this.tempFiles[i].lastIndexOf('.');
					let suffix = this.tempFiles[i].substring(markIndex);
					this.formData.key = new Date().getTime() + Math.floor(Math.random() * 150) + suffix;

					console.log('this.formData.key', this.formData.key, 'this.tempFiles[i].name', this.tempFiles[i]
						.name, 'this.tempFiles[i]', this.tempFiles[i]);

					// fileUrl放在上传（uploadFile）内，则只能获取到最后一个值
					let fileUrl = this.upPicUrl2 + '/' + this.formData.key;
					let formData = {
						...this.formData
					}; //需要这样赋值，否则for循环传值一致 
					// let type = this.tempFiles[i].type; //需要这样赋值，否则for循环传值一致
					console.log('fileUrl, type123', fileUrl, suffix, 'this.formData', this.formData);
					uni.uploadFile({
						name: 'file', //文件上传的name值
						url: this.upPicUrl2, //接口地址
						formData: formData, //上传额外携带的参数
						filePath: this.tempFiles[i], //临时路径
						success: uploadFileRes => {
							console.log('this.formData222222', this.formData);
							if (uploadFileRes.statusCode != 200) {
								uni.showToast({
									title: '上传失败 : ' + uploadFileRes.data,
									icon: 'none'
								});
								uni.hideLoading();
							} else {
								console.log('this.tempFiles[i]', this.tempFiles[i], 'uploadFileRes',
									uploadFileRes)
								uni.showLoading({
									title: '上传中...'
								});

								this.videoShowUrl = fileUrl;
								// 注册媒资 

								this.getVideoDimensions(this.videoShowUrl)

							}
						},
						fail: e => {
							uni.hideLoading();
							console.log(e)
							uni.showToast({
								title: '上传失败==>' + e,
								icon: 'none'
							});
						}
					});
				}
			},

			async avatarSaveFn(url) {
				console.log(url)

				if (this.duration < 15) {
					this.$sun.toast('请上传一段15秒以上的视频进行提交', 'none')
					return
				}

				const result = await this.$http.post({
					url: this.$api.avatarSave,
					data: {
						uid: uni.getStorageSync("uid"),
						video_url: url,
						name: this.name,
						width: this.webBgWidth,
						height: this.webBgHeight
					}

				});
				if (result.errno == 0) {
					console.log(result.data)

					this.taskStatis = result.data

					this.name = ''

					this.$refs.pop.close()

					this.$refs.pop2.close()
					setTimeout(()=>{
						this.$sun.toast(result.message, 'none')
					},500)

					this.mescroll.resetUpScroll();

					uni.hideLoading();
				} else {
					uni.hideLoading();
					setTimeout(()=>{
						this.$sun.toast(result.message, 'none')
					},500)
				}

			},
			getVideoDimensions(videoUrl) {
				console.log(videoUrl)
				


				wx.getImageInfo({
					src: videoUrl + '?x-oss-process=video/snapshot,t_1,ar_h,f_jpg',
					success: res => {
						uni.showLoading({
							title: '上传中...'
						});
						console.log(videoUrl + '?x-oss-process=video/snapshot,t_1,ar_h,f_jpg')
						console.log(res, '视频宽高')
						this.webBgWidth = res.width; // 视频宽度
						this.webBgHeight = res.height; // 视频高度

						this.avatarSaveFn(videoUrl);

					},
					fail: err => {
						uni.hideLoading();
						console.log(err)
						this.$sun.toast('获取宽高失败', 'none')
					}
				})


			},


			confirm() {
				if (!this.name) {
					this.$sun.toast('请填写数字人形象名称', 'none')
					return
				}

				this.$refs.pop2.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true,
					topclose: false
				});

				this.$refs.pop.close()
			},
			cancel() {
				this.$refs.pop.close()
			},
			async memberSetFn() {
				const result = await this.$http.get({
					url: this.$api.memberSet,
					data: {


					}
				});
				if (result.errno == 0) {

					this.memberSetObj = result.data

					console.log(result.data)

				}
			},
			addDigital() {

				if (this.user.is_member == 0 && this.memberSetObj.is_open == 1) {
					uni.showModal({
						title: '温馨提示',
						content: '你当前不是会员，请开通会员后享受该功能',
						confirmText: '去开通',
						success: async (res) => {
							if (res.confirm) {


								this.$sun.navGo('/pages/contactUs/memberCenter')

							} else if (res.cancel) {

							}
						}
					});
				} else {

					this.$refs.pop.show({
						anim: 'bottom',
						position: 'bottom',
						shadeClose: true,
						topclose: false
					});
				}




			},

			localFn() {
				this.$sun.navBack()
			},




		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 100vh;
		padding: 20rpx;
		position: relative;

		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}



		.label {
			background-color: #fff;
			color: #A1A1A1;
			border-radius: 10rpx;
			padding: 8rpx 16rpx;
			display: inline-block;
			margin-right: 20rpx;


		}

		// “新建文件夹” 弹框
		.v-pop-cls {
			padding: 40rpx 26rpx 60rpx;
			border-radius: 20rpx;
			width: 644rpx;
			background-color: #fff;

			.confirm-btn {
				padding: 0 60rpx;
			}

			.must {
				color: red;
				margin-left: 8rpx;
			}

			.radio-cls {
				transform: scale(0.8);
			}

			.input-frame,
			.no-input-frame {
				padding: 20rpx;
				border-radius: 10rpx;
				width: 360rpx;
			}

			.input-frame {
				border: 2rpx solid #d9d9d9;
			}

			.no-input-frame {
				background: #f0f0f0;
				border: 2rpx solid #f0f0f0;
			}

			.input-frame2 {
				width: 400rpx;
			}
		}

		// 按钮样式
		.c-but {
			border-radius: 20rpx;
			margin: 20rpx;
			text-align: center;
			font-size: 32rpx;
			height: 100rpx;
			margin-top: 30rpx;
			color: #ffffff;
			background: linear-gradient(90deg, rgb(188, 120, 248), rgb(135, 80, 242) 100%);
		}

		.add-digital-cls,
		.digital-card-cls {
			border-radius: 20rpx;
			height: 470rpx;
			margin-right: 10rpx;
		}

		.add-digital-cls {
			width: 32%;
			// margin-left: 20rpx;
			border: 2rpx dashed rgb(235, 234, 234);
			background: linear-gradient(144.13deg, rgba(255, 255, 255, 0) 37.281%, rgba(41, 144, 255, 0.21) 95.242%);

			image {
				width: 54rpx;
			}

			view {
				color: rgb(36, 157, 255);
				margin-top: 10rpx;
			}
		}

		.container {
			/* 矩形 5870 */
			width: 32%;
			// height: 388rpx;
			border-radius: 10rpx;
			background-color: #fff;
			position: relative;

			.mask {
				position: absolute;
				/* 矩形 5876 */
				width: 230rpx;
				height: 338rpx;
				top: 0;
				left: 0;
				border-radius: 20rpx;
				z-index: 99;
				color: #fff;

				background: rgba(17, 18, 23, 0.66);
			}

			.statusColorG {
				position: absolute;
				top: 0;
				left: 0;
				/* 矩形 5879 */
				width: 102rpx;
				height: 40rpx;
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				color: #fff;
				background: rgba(49, 169, 82, 1);
				font-size: 21rpx;
				z-index: 999;
			}

			.statusColorR {
				position: absolute;
				top: 0;
				left: 0;
				/* 矩形 5879 */
				width: 102rpx;
				height: 40rpx;
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				color: #fff;
				background: red;
				font-size: 21rpx;
				z-index: 999;
			}

			.statusColorB {
				position: absolute;
				top: 0;
				left: 0;
				/* 矩形 5879 */
				width: 102rpx;
				height: 40rpx;
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				color: #fff;
				background: blue;
				font-size: 21rpx;
				z-index: 99;
			}

			.digitImg {
				// width: 33.3%;
				height: 338rpx;
				border-radius: 20rpx;

			}

			.icon {
				/* 下载 */
				width: 32rpx;
				height: 32rpx;
			}


		}

		/* 训练前提示 弹框 */
		.v-pop-cls {
			padding: 62rpx 24rpx 30rpx;
			background-color: #fff;
			width: 100%;
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.video-title-cls {
				background: linear-gradient(102.95deg, rgb(29, 130, 255), rgb(226, 79, 250));
				-webkit-background-clip:
					text;
				-webkit-text-fill-color:
					transparent;
				background-clip:
					text;
				text-fill-color:
					transparent;
				font-size: 40rpx;
				font-weight: 600;
				letter-spacing: 0%;
			}

			.detail-cls {
				color: rgb(51, 51, 51);
				font-size: 32rpx;
				font-weight: 600;
				margin: 30rpx 0;
			}

			image {
				width: 100%;
			}

			.hint-cls {
				margin-top: 20rpx;

				view {
					width: 16rpx;
					height: 16rpx;
					background: rgba(23, 218, 112, 1);
					border-radius: 50%;
					margin-right: 10rpx;
				}

				text {
					color: rgb(153, 153, 153);
					font-size: 26rpx;
				}
			}
		}
	}
</style>